{{csrf_field()}}
<div class="layui-row layui-col-space20">
    <div class="layui-col-md4">

        @include('admin.miniprogram.page.navcomponents')
    </div>
    <div class="layui-col-md4">

        @include('admin.miniprogram.page.phonemain')
    </div>
    <div class="layui-col-md4 ">

        @include('admin.miniprogram.page.editor')
    </div>
</div>
<textarea id="edit_image" style="display: none;"></textarea>
@section('script')
    <link rel="stylesheet" href="{{ asset('static/admin/iconfonts/mdi/css/materialdesignicons.min.css') }}">
    <link rel="stylesheet" href="{{ asset('static/admin/css/diynew.css') }}">

    <script src="{{ asset('static/admin/js/jquery.min.js') }}"></script>
    <script src="{{ asset('static/admin/js/ddsort/ddsort.js') }}"></script>
    <script>
        var itemData=[];
        layui.use(['layer','carousel', 'form','formSelects','laytpl'], function(){
            var layer = layui.layer,

                laytpl = layui.laytpl,
                form =layui.form;


            var ue = UE.getEditor('richtext');
            var _editor = UE.getEditor("edit_image",{
                initialFrameWidth:800,
                initialFrameHeight:300,
                zIndex:19891026,
            });
            _editor.ready(function (){
                _editor.hide();
                _editor.addListener('beforeInsertImage',function(t,arg){
                    console.log(arg);
                    console.log(t);
                    var obj = _editor.queryCommandValue("serverparam");
                    if(obj.type == "upload-image"){
                        if(arg.length>1){
                            layer.msg("最多只能选择1张图片，请重新选择");
                            return false;
                        }
                        if(arg.length>0) {
                            var uploadImageTd = obj.uploadImageItem.parent().find(".layui-upload-list");
                            console.log(uploadImageTd);
                            uploadImageTd.find('img').attr('src',arg[0].src);
                            uploadImageTd.find('input').val(arg[0].image_id);
                            uploadImageTd.show();
                        }else{
                            layer.msg("请先选择图片");
                            return false;
                        }
                    }
                    return true;
                });
            });

            $("body").on("click", ".upload-image", function () {

                //此处进行初始化
                var obj = _editor.queryCommandValue("serverparam");
                obj.type = "upload-image";
                obj.uploadImageItem = $(this);
                var uploadImage = _editor.getDialog("insertimage");
                console.log(obj);
                uploadImage.open();
            });
            //监听提交
            form.on('submit(post-submit)', function(data){

            });

            $('#phone-main').DDSort({
                target: '.drag',
                delay: 50,
                floatStyle: {
                    'border': '1px solid #ccc',
                    'background-color': '#fff'
                },
                // 由于 transform 的影响，对于类似 bootstrap 这样用了 transform 的元素，
                // 需要手动处理拖拽元素的位置，如下
                move: function (left, top) {
                    $(this).css('left', left);
                    $(this).css('top', top );
                },
                // 延时处理，默认为 50 ms，防止手抖点击 A 链接无效
                up: function() {
                   console.log($(this).parent())

                }

            });

            $("body").on("click", ".btn-del", function () {

                var $this = $(this);
                layer.confirm('确定要删除吗？',
                    function(index) {
                        $this.parents(".drag").remove();
                        $('.editorbox').html("");
                        layer.close(index);
                    });
            });
            var defaultData = {
                search: {
                    id:0,
                    name: '搜索框',
                    params: {
                        'placeholder': '请输入关键字进行搜索2'
                    },
                    style: {
                        textAlign: 'left',
                        searchStyle: ''
                    }
                },
            }

            $("body").on("click", "nav.special", function () {
                var _this= $(this);
                var itemid=itemID();

                var index=_this.data("type");
                console.log(index)

                data=defaultData[index];
                //console.log(data)

               // console.log(data)

                itemData[itemid]=defaultData[index];
                itemData[itemid].id=itemid;
                itemData[itemid].type=_this.data("type");


                /*var data={
                    id:itemid,
                    params:{placeholder:"sss"},

                };*/

                console.log(itemData);
               // alert($('#tpl_diy_search').html());

                $('.drag').removeClass("selected");

                var getTpl = $('#tpl_diy_search').html();

                laytpl(getTpl).render(data, function(html){
                    $('#phone-main').append(html)
                    console.log(html);
                    //view.innerHTML = html;
                });
                var getTpl = $('#tpl_editor_search').html();
                defaultData.search.id=itemid;
                laytpl(getTpl).render(defaultData.search, function(html){
                    $('.editorbox').html(html)
                    console.log(html);
                    //view.innerHTML = html;
                });



                form.render();

            });

            // 绑定input修改事件
            $(".editorbox").on('input propertychange change', '[data-bind]',
                function() {

                    console.log(111);
                    console.log($(this).data('bind'));

                    var itemId = $(this).parents('.teditor').data('itemid');

                    var bind = $(this).data('bind');
                    var itemIndex=bind.split('.');

                    var val=$(this).val();
                    console.log(bind);
                    console.log(itemId); //被点击的radio的value值
                    console.log(itemData);
                   // itemData[itemId][bind]=$(this).val()
                    console.log(itemData[itemId]);

                    var itemType=itemData[itemId]["type"];

                    console.log(itemType);
                    //itemIndex = $this.data('bind').split('.'),
                    console.log(itemIndex.length);
                    console.log(itemIndex);
                    itemData[itemId]["id"]=itemId;
                    var item = itemData[itemId][itemIndex[0]];
                    switch (itemIndex.length) {
                        case 1:
                            item = val;
                            break;
                        case 2:
                            console.log(item[itemIndex[1]]);
                            item[itemIndex[1]] = val;
                            break;
                        case 3:
                            item[itemIndex[1]][itemIndex[2]] = val;
                            break;
                    }
                    console.log(itemData);
                    var getTpl=$("#tpl_diy_"+itemType).html();
                    console.log(itemData[itemId]);
                    laytpl(getTpl).render(itemData[itemId], function(html){
                        $("#diy-"+itemId).prop('outerHTML',html).addClass('selected');
                        console.log(html);
                        //view.innerHTML = html;
                    });

                   /* html = template('tpl_diy_' + item.type, item),
                        $diy = function() {
                            return $('#diy-' + item.id);
                        };

                    console.log($diy);
                    console.log(html);
                    $diy().prop('outerHTML', 'ss').addClass('selected');
                    $diy().addClass('selected');*/

                });
            form.on('radio(radio)', function(data){
                console.log(data.elem); //得到radio原始DOM对象
                console.log(data.value); //被点击的radio的value值
                var itemId = $(this).parents('.teditor').data('itemid');

                var bind = $(this).data('bind');
                console.log(bind);
                console.log(itemId); //被点击的radio的value值
                console.log(itemData);
                itemData[itemId][bind]=data.value
                console.log(itemData[itemId]);

            });

            function tpl(data) {
                var getTpl = custom_tempalte.innerHTML
                    ,view = document.getElementById('view');
                laytpl(getTpl).render(data, function(html){
                    $('#phone-main').append(html)
                    console.log(html);
                    //view.innerHTML = html;
                });
            }

            function itemID() {
                return 'n' + Math.random().toString().substr(3);

            }



        });
    </script>
@endsection